<template>
  <div class="login">
    <el-select style="width: 100px; position: absolute; top: 10px; right: 20px" v-model="language" size="mini"
      placeholder="中文" @change="lang">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
        :disabled="item.disabled">
      </el-option>
    </el-select>
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <div class="form-logo">
        <img src="/images/indota_full.png" width="270px" height="130px" />
      </div>
      <div class="form-sub-title">
        <span class="title-app">{{ appTitle }}
        </span>
      </div>
      <!-- <div class="form-title">
        <span class="title-com">INDOTA
        </span>
        <span class="title-app">{{ appTitle }}
        </span>
      </div> -->
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" type="text" auto-complete="off" :placeholder="$t('user.Username')">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" type="password" auto-complete="off" :placeholder="$t('index.Password')"
          @keyup.enter.native="handleLogin">
          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
        </el-input>
      </el-form-item>
      <el-form-item prop="code" v-if="captchaOnOff">
        <el-input v-model="loginForm.code" auto-complete="off" :placeholder="$t('CAPTCHA')" style="width: 63%"
          @keyup.enter.native="handleLogin">
          <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img" />
        </div>
      </el-form-item>
      <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px" @change="handleRemember">
        {{ $t("login.RemeberMe") }}
      </el-checkbox>

      <el-form-item style="width: 100%">
        <el-button :loading="loading" size="medium" type="primary" style="width: 100%"
          @click.native.prevent="handleLogin">
          <span v-if="!loading">{{ $t("Login") }}</span>
          <span v-else>{{ $t("Logining") }}</span>
        </el-button>
        <div style="float: right" v-if="register">
          <router-link class="link-type" :to="'/register'">{{ $t('common.RegisterTips') }}</router-link>
        </div>
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <div class="el-login-footer">
      <span>{{ $t("app.DeviceManageSystem") }}</span>
    </div>
  </div>
</template>

<script>
  import {
    getCodeImg
  } from "@/api/login";
  import Cookies from "js-cookie";
  import {
    appTitleCode
  } from '@/utils'
  // import indexAPI from '@/api/index'
  import {
    encrypt,
    decrypt
  } from "@/utils/jsencrypt";

  export default {
    name: "Login",
    data() {
      return {
        options: [{
            value: "1",
            label: "中文",
          },
          {
            value: "2",
            label: "English",
          },
        ],
        language: this.$i18n.locale === 'zh' ? "1" : '2',
        codeUrl: "",
        loginForm: {
          username: "",
          password: "",
          rememberMe: false,
          code: "",
          uuid: "",
        },
        loginRules: {
          username: [{
            required: true,
            trigger: "blur",
            message: this.$t("login.InputAccount"),
          }, ],
          password: [{
            required: true,
            trigger: "blur",
            message: this.$t("login.InputPassword"),
          }, ],
          code: [{
            required: true,
            trigger: "change",
            message: "请输入验证码"
          }],
        },
        loading: false,
        // 验证码开关
        captchaOnOff: false,
        // 注册开关
        register: true,
        redirect: undefined,
      };
    },
    computed: {
      appTitle() {
        const code = appTitleCode()
        return this.$t(code)
      },
    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true,
      },
    },
    created() {
      // this.getCode()
      this.getRemember()
    },
    methods: {
      lang(e) {
        const locale = e == 1 ? "zh" : "en"
        const vm = this
        // indexAPI.language(locale).then(() => {
        vm.$i18n.locale = locale;
        window.localStorage.setItem("lang", locale);
        Cookies.set("lang", locale)
        location.reload()
        // })
      },
      getCode() {
        getCodeImg().then((res) => {
          this.captchaOnOff =
            res.captchaOnOff === undefined ? true : res.captchaOnOff;
          if (this.captchaOnOff) {
            this.codeUrl = "data:image/gif;base64," + res.img;
            this.loginForm.uuid = res.uuid;
          }
        });
      },
      setItem(key, value) {
        // localStorage.setItem(key, value)
        Cookies.set(key, value, {
          expires: 30
        });
      },
      getItem(key) {
        // return localStorage.getItem(key)
        return Cookies.get(key);
      },
      removeItem(key) {
        // localStorage.removeItem(key)
        Cookies.remove(key);
      },
      getRemember() {
        const rememberMe = this.getItem('rememberMe')
        if (rememberMe !== 'yes') {
          return
        }
        const username = this.getItem('username')
        const password = this.getItem('password')
        this.loginForm.rememberMe = true
        if (username && password) {
          this.loginForm.username = username
          this.loginForm.password = decrypt(password)
        }
      },
      setRemember() {
        if (!this.loginForm.rememberMe) {
          return
        }
        this.setItem("username", this.loginForm.username);
        this.setItem("password", encrypt(this.loginForm.password));
      },
      clearRemember() {
        this.remove("username");
        this.remove("password");
        this.remove("rememberMe");
      },
      handleRemember() {
        this.setItem('rememberMe', this.loginForm.rememberMe ? "yes" : 'no')
        if (this.loginForm.rememberMe) {
          return
        }
        this.clearRemember()
      },
      handleLogin() {
        const vm = this
        this.$refs.loginForm.validate((valid) => {
          if (!valid) {
            return
          }
          vm.loading = true;
          vm.$store
            .dispatch("Login", this.loginForm)
            .then(() => {
              vm.setRemember()
              vm.$router.push({
                path: vm.redirect || "/"
              }).catch(() => {});
            })
            .catch(() => {
              vm.loading = false;
              if (vm.captchaOnOff) {
                vm.getCode();
              }
            });
        });
      },
    },
  };

</script>

<style rel="stylesheet/scss" lang="scss">
  .login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-image: url("/images/login-background.jpg");
    background-color: #707070;
    background-size: cover;
  }

  .form-logo {
    text-align: center;
  }

  .form-sub-title {
    text-align: center;
    margin-bottom: 15px;
  }

  .form-title {
    display: flex;
    align-items: flex-end;
    margin: 5px auto 15px auto;
  }

  .title-com,
  .title-app {
    margin-left: 3px;
  }

  .title-com {
    color: #1269da;
    font-size: 40px;
    padding-bottom: 3px;
  }

  .title-app {
    color: #707070;
    padding-bottom: 10px;
  }

  .login-form {
    border-radius: 6px;
    background: #ffffff;
    width: 400px;
    padding: 25px 25px 5px 25px;

    .el-input {
      height: 38px;

      input {
        height: 38px;
      }
    }

    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 2px;
    }
  }

  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }

  .login-code {
    width: 33%;
    height: 38px;
    float: right;

    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }

  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
  }

  .login-code-img {
    height: 38px;
  }

</style>
